<template>
<!--开平开票界面-->
  <div>
    <div class="pay-buy-order-box">
      <el-form :model="invoiceKaiping" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="开票开平单号:" required>
            <el-tag style="margin-right: 20px"  type="danger" effect="dark" v-for="(item,index) in invoiceKaiping.kaipingOrderIdList" :key="index">{{item.kaipingOrderId}}</el-tag>
        </el-form-item>
        <div style="display: flex">
          <el-form-item style="flex: 1" label="发票类型" required >
            <el-button-group>
              <el-button  type="success" >开平发票</el-button>
            </el-button-group>
          </el-form-item>
          <el-form-item style="flex: 1" label="开平厂家:" required>
              <span style="font-size: 17px;font-weight: bold">{{invoiceKaiping.kaipingguyName}}</span>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item style="flex: 1" label="开票单总价" required>
            <span style="font-size: 17px;font-weight: bold;color: #ff3526">{{invoiceKaiping.allKaipingOrderMoney}}</span>
            <span  style="font-size: 17px;font-weight: bold;color: #ff3526;font-style: oblique">元</span>
          </el-form-item>
          <el-form-item style="flex: 1" label="已开票金额" required>
            <span style="font-size: 17px;font-weight: bold;">{{invoiceKaiping.nowInvoiceMoney}}</span>
            <span  style="font-size: 17px;font-weight: bold ;font-style: oblique">元</span>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item style="flex: 1" label="应开票" required>
            <span style="font-size: 17px;font-weight: bold;color: #ff3526">{{invoiceKaiping.shouldInvoiceMoney}}</span>
            <span  style="font-size: 17px;font-weight: bold;color: #ff3526;font-style: oblique">元</span>
          </el-form-item>
          <el-form-item style="flex: 1" label="实开金额" prop="invoiceMoney" >
            <el-input v-model="invoiceKaiping.invoiceMoney" placeholder="元" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" clearable style="width: 160px"></el-input>
            <span style="font-weight: bold;font-size: 16px">&nbsp;元&nbsp;</span>
            <el-checkbox v-model="invoiceKaiping.isOver">开票完毕</el-checkbox>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item style="flex: 1" label="开票时间" prop="invoiceTime">
            <el-date-picker
              v-model="invoiceKaiping.invoiceTime"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item style="flex: 1" label="经办人" required>
            <el-tag>{{employeeName}}</el-tag>
          </el-form-item>
        </div>

        <el-form-item style="flex: 1" label="发票抬头" prop="invoiceTitle" >
          <el-input v-model="invoiceKaiping.invoiceTitle"  clearable style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item style="flex: 1" label="备注" >
          <el-input type="textarea" style="width: 400px" :rows="3"
                    maxlength="50"
                    show-word-limit
                    v-model="invoiceKaiping.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="this.loading" type="primary" @click="submitForm('ruleForm')"><span style="font-weight: bold;font-size: 16px">确认开票</span></el-button>
          <el-button :loading="this.loading" type="danger" @click="resetForm('ruleForm')"><span style="font-weight: bold;font-size: 16px">重置信息</span></el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
import {get, post} from "../../utils/request";

export default {
  name: "InvoiceKaipingOrder",
  props:['multipleSelection'],
  data(){
    return{
      loading:false,
      invoiceKaiping:{
        kaipingOrderIdList:[],
        remark:null,
        kaipingguyId:null,
        allKaipingOrderMoney:0,
        nowInvoiceMoney:0,
        shouldInvoiceMoney:0,
        invoiceMoney:null,
        isOver:false,
        invoiceTime:null,
        invoiceTitle:null,
        kaipingguyName:null,


      },
      employeeName:null,
      rules: {
        invoiceMoney: [
          { required: true, message: '请输入开票金额', trigger: 'blur' },
        ],

        invoiceTime: [
          { type: 'date', required: true, message: '请选择开票日期', trigger: 'change' }
        ],
        invoiceTitle:[
          { required: true, message: '请填写发票抬头', trigger: 'blur' },
        ]
      },
      pickerOptions: {

        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },

    }
  },
  created() {
    this.invoiceKaiping.invoiceTime=new Date()
    get("/api/v1/token/showRealName").then(resp=>{
      this.employeeName=resp.data
    })
    },
  mounted() {
     this.invoiceKaiping= {
       kaipingOrderIdList:[],
       remark:null,
       kaipingguyId:null,
       allKaipingOrderMoney:0,
       nowInvoiceMoney:0,
       shouldInvoiceMoney:0,
       invoiceMoney:null,
       isOver:false,
       invoiceTime:null,
       invoiceTitle:null,
       kaipingguyName:null,


     }
    this.invoiceKaiping.invoiceTime=new Date()
    this.fleshNewMsg()
    },
  methods:{
    fleshNewMsg(){
      this.invoiceKaiping.kaipingguyId=this.multipleSelection[0].kaipingGuy.kaipingguyId
      this.invoiceKaiping.kaipingguyName=this.multipleSelection[0].kaipingGuy.kaipingguyName
      for (let i = 0; i <this.multipleSelection.length ; i++) {
        this.invoiceKaiping.kaipingOrderIdList.push({kaipingOrderId:this.multipleSelection[i].kaipingOrderId,processingTime:this.multipleSelection[i].processingTime})
        this.invoiceKaiping.allKaipingOrderMoney+=this.multipleSelection[i].money;
        this.invoiceKaiping.nowInvoiceMoney+=Math.round((this.multipleSelection[i].money-this.multipleSelection[i].invoiceMoney)*100)/100

      }
      this.invoiceKaiping.shouldInvoiceMoney=Math.round((this.invoiceKaiping.allKaipingOrderMoney-this.invoiceKaiping.nowInvoiceMoney)*100)/100
    },
    submitForm(formName) {
      this.loading=true
      if ((this.invoiceKaiping.shouldInvoiceMoney-this.invoiceKaiping.invoiceMoney)<0){
        this.$message.error("开票的金额已经超出所需,请修改实开金额")
        this.loading=false
        return
      }
      if (this.invoiceKaiping.invoiceMoney==="0"){
        this.$message.error("实开金额不能为0元")
        this.loading=false
        return
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {
            post('/api/v1/post/invoice/kaiping',this.invoiceKaiping).then(resp=>{
                if (resp.data.code===1){
                  this.$message({
                    message: resp.data.msg,
                    type: 'success'
                  });
                  this.loading=false
                  this.$emit('aNewThing2')
                }else {
                  this.$message.error(resp.data.msg)
                  this.loading=false
                }
            }).catch(resp=>{
               this.$message.error("系统出bug了,快找bug")
              this.loading=false
            })
        } else {
          this.loading=false
          return false;
        }
      });
    },
    resetForm(formName) {
      this.invoiceKaiping.remark=null
      this.invoiceKaiping.isOver=false
      this.$refs[formName].resetFields();
    }
  },
  watch:{
    'multipleSelection'(){
      this.invoiceKaiping=  {
        kaipingOrderIdList:[],
        remark:null,
        kaipingguyId:null,
        allKaipingOrderMoney:0,
        nowInvoiceMoney:0,
        shouldInvoiceMoney:0,
        invoiceMoney:null,
        isOver:false,
        invoiceTime:null,
        invoiceTitle:null,
        kaipingguyName:null,
      }
      this.invoiceKaiping.invoiceTime=new Date()


      if (this.multipleSelection.length!==0){
        this.fleshNewMsg()
      }

    }
  },
  beforeDestroy() {

  }

}
</script>

<style scoped>
.pay-buy-order-box{
  min-height: 400px;
}
</style>
